<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		.wrap {
			width: 300px;
			margin: 100px auto 0;
		}

		table {
			border-collapse: collapse;
			border-spacing: 0;
			border: 1px solid #c0c0c0;
			width: 300px;
		}

		th,
		td {
			border: 1px solid #d0d0d0;
			color: #404060;
			padding: 10px;
		}

		th {
			background-color: #09c;
			font: bold 16px "微软雅黑";
			color: #fff;
		}

		td {
			font: 14px "微软雅黑";
		}

		tbody tr {
			background-color: #f0f0f0;
		}

		tbody tr:hover {
			cursor: pointer;
			background-color: #fafafa;
		}
	</style>

</head>
<body>
	<div class="wrap">
		<table>
			<thead>
				<tr>
					<th>
						<input type="checkbox" id="theadInp" />
					</th>
					<th>菜名</th>
					<th>饭店</th>
				</tr>
			</thead>

			<tbody id="tbody">
				<tr>
					<td>
						<input type="checkbox" />
					</td>
					<td>红烧肉</td>
					<td>田老师</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" />
					</td>
					<td>西红柿鸡蛋</td>
					<td>田老师</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" />
					</td>
					<td>红烧狮子头</td>
					<td>田老师</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" />
					</td>
					<td>日式肥牛</td>
					<td>田老师</td>
				</tr>
			</tbody>

		</table>
	</div>

</body>

<!-- <script>
var theadInp = document.getElementById("theadInp");
var tBody = document.getElementById("tbody");
var checkBoxArr = tBody.getElementsByTagName("input");

theadInp.onclick = function(){
	if(this.checked == true){
		for(var i=0;i<checkBoxArr.length;i++){
			checkBoxArr[i].checked = true;
		}
	}else{
		for(var i=0;i<checkBoxArr.length;i++){
			checkBoxArr[i].checked = false;
		}
	}
}

//点击下面的所有input 判断 如何下面的input全部被选中时 上面的就选中 
//如果有一个是没有选中的  上面的就显示没有被选中
//循环点击
for(var i=0;i<checkBoxArr.length;i++){
	checkBoxArr[i].onclick = function(){
		//循环判断
		for(var j=0;j<checkBoxArr.length;j++){
			if(checkBoxArr[j].checked == false){
			theadInp.checked = false;
		}else{
			theadInp.checked = true;

		}
		}
		
	}
}
</script> -->
<script src="../jquery-1.12.4.js"></script>
<script>
$("#theadInp").on("click",function(){
	$("#tbody input:checkbox").prop("checked",$(this).prop("checked"));
})
$("#tbody input:checkbox").on("click",function(){
	// if(("#tbody input:checkbox").length === $("#tbody input:checked").length){
	// 	$("#theadInp").prop("checked",true);
	// }else{
	// 	$("#theadInp").prop("checked",false);
	// }
	// 
	if(this.checked == false){
		$("#theadInp").prop("checked",false);

	}else{
		$("#theadInp").prop("checked",true);

	}
})

</script>
</html>